/* vue */
import { defineComponent, toRefs, ref, watch, PropType, toRef,reactive, computed} from "vue";
/* components */
import NoDataViewNew from '@src/component/common/NoDataViewNew';
/* util */
import i18n from '@src/locales'
import Platform from '@src/util/platform'
import _ from 'lodash';
/* scss */
import './style.scss';

class RelationItem {
  // 标题
  displayName: string = ''
  // 字段唯一标识
  fieldName: string = ''
  // 字段类型
  formType: string = ''
  // 模块
  module: string = ''
  // 多选
  isMulti?: boolean // 多级菜单需要判断多选
  // 表单id
  id?: string = ''
  
  constructor(field = { id: '', displayName: '', fieldName: '', formType: '', setting: {} as Record<string, any> }) {
    this.displayName = field.displayName || ''
    this.fieldName = field.fieldName || ''
    this.isMulti = field.setting?.isMulti
    this.formType = field.formType || ''
    this.id = field.id;
  }
}
export default defineComponent({
    name: 'referencing-form-modal',
    props: {},
    components: {
      NoDataViewNew,
    },
    setup(props, { emit }) {
      const state = reactive({
        selectedRelationItem: [],
        relationOptions: [],
        visible: false,
        selectedRelationTaskList: [] // 表单上已经保存的字段
      });

      const selectedRelationArray = computed(() => {
        let selectedRelationArray: any = []

        state.selectedRelationItem.map(item => {
          let selectedItem = state.relationOptions.find(option => option.fieldName == item)
          selectedRelationArray.push(new RelationItem(selectedItem))
        })
        
        return selectedRelationArray
      });
      /** 打开弹窗 */
      const open = (relationOptions: [],  selectedRelationTaskItem: []) => {
        state.visible = true;
        // 初始化关联项数据
        state.relationOptions = relationOptions;
        // 获取已保存的表单关联字段
        state.selectedRelationTaskList = selectedRelationTaskItem;
        state.selectedRelationItem = _.cloneDeep(selectedRelationTaskItem);
        
      };
      /** 取消 */
      const cancel = () => {
        //清除校验
        state.visible = false;
      };
      const onDel = (item: any) => {
        state.selectedRelationItem = state.selectedRelationItem.filter(f=> f !== item.fieldName);
      };
      /** 确定提交数据 */
      const save = () => {
        emit('confirm', selectedRelationArray.value)
        cancel();
      };
      /** 渲染关联项 */
      const renderRelationOptions = ()=> {
        return (
          <div class='relation-options-panel'>
            <h4>{i18n.t('common.form.tip.relationTask.relationModelLeftTitle')}</h4>
            { state.relationOptions.length > 0 ? (
              <el-checkbox-group
                value={state.selectedRelationItem}
                onInput={(value: []) => state.selectedRelationItem = value}
              >
                {
                  state.relationOptions.map((item: any) => {
                    return (
                      <el-checkbox
                        label={item.fieldName}
                      >
                        { item.displayName }
                      </el-checkbox>
                    )
                  })
                }
              </el-checkbox-group>):

            (<no-data-view-new />)}
          </div>
        )
      };
      /**  渲染已选择的关联项*/
      const renderSelectedRelationOptions = ()=> {
        return (
        <div class='relation-options-panel'>
          <h4>{i18n.t('common.form.tip.relationTask.relationModelRightTitle')}</h4>
          <div class='relation-options-selected-panel'>
          {
            selectedRelationArray.value.map((item: any) => {
              return (
                <label>
                  <span class="relation-options-selected-cont">{ item.displayName }</span>
                  <i class="iconfont icon-close-circle" onClick={()=>onDel(item)} ></i>
                </label>
              )
            })
          }
          </div>
        </div>
        )
      };
        /**  渲染icon*/
        const renderIncon = ()=> {
          return (
          <div class='relation-options-icon'>
            <i class='iconfont icon-mianbanjiantou'></i>
          </div>
          )
        };
        return {
          ...toRefs(state),
          cancel,
          save,
          open,
          renderRelationOptions,
          renderSelectedRelationOptions,
          renderIncon,
          selectedRelationArray,
        }
    },
    render() {
      const { visible } = this;
      return (
        <base-modal
          class="related-form-modal"
          title={i18n.t('common.form.tip.relationTask.relationModelTitle')}
          show={visible}
          onClose={ this.cancel }
          width="500px"
        >
          {this.renderRelationOptions()}
          {this.renderIncon()}
          {this.renderSelectedRelationOptions()} 
          <div slot="footer" class="dialog-footer">
            <el-button type="ghost" onClick={this.cancel}>{i18n.t('buttons.cancel')}</el-button>
            <el-button type="primary" onClick={this.save}>{i18n.t('buttons.save')}</el-button>
          </div>
        </base-modal>);
      }
})